<!-- views/student/Profile.vue -->
<template>
  <div class="profile-container">
    <h2 class="page-title">个人信息</h2>

    <el-card class="profile-card">
      <div class="profile-header">
        <div class="avatar">
          <el-icon size="50"><User /></el-icon>
        </div>
        <div class="info">
          <h3 class="name">{{ student.name }}</h3>
          <p class="detail">学号：{{ student.studentId }}</p>
          <p class="detail">班级：{{ student.className }}</p>
        </div>
      </div>

      <el-divider />

      <h4 class="section-title">联系方式</h4>
      <el-form
          :model="form"
          :rules="rules"
          ref="formRef"
          label-width="100px"
          class="contact-form"
      >
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系电话" />
        </el-form-item>

        <el-form-item label="家庭地址" prop="address">
          <div class="address-container">
            <el-cascader
                :options="regionOptions"
                v-model="form.address"
                placeholder="请选择省市区"
                style="width: 100%;"
            />
          </div>
        </el-form-item>

        <el-form-item label="详细地址" prop="addressDetail">
          <el-input
              v-model="form.addressDetail"
              type="textarea"
              :rows="3"
              placeholder="请输入详细地址"
          />
        </el-form-item>

        <el-form-item label="紧急联系人" prop="emergencyContact">
          <el-input
              v-model="form.emergencyContact"
              placeholder="请输入紧急联系人姓名"
          />
        </el-form-item>

        <el-form-item label="紧急电话" prop="emergencyPhone">
          <el-input
              v-model="form.emergencyPhone"
              placeholder="请输入紧急联系人电话"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">保存修改</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {
        name: '张三',
        studentId: '2023001',
        className: '23软件班'
      },
      form: {
        phone: '13800138001',
        address: [520000, 522700, 522701],
        addressDetail: '文明路123号',
        emergencyContact: '张三',
        emergencyPhone: '13900139001'
      },
      regionOptions: [
        {
          value: 520000,
          label: '贵州省',
          children: [
            {
              value: 522700,
              label: '黔南州',
              children: [
                { value: 522701, label: '都匀市' },
                { value: 522702, label: '福泉市' },
                { value: 522722, label: '荔波县' },
                { value: 522723, label: '贵定县' },
                { value: 522725, label: '瓮安县' },
                { value: 522726, label: '独山县' },
                { value: 522727, label: '平塘县' },
                { value: 522728, label: '罗甸县' },
                { value: 522729, label: '长顺县' },
                { value: 522730, label: '龙里县' },
                { value: 522731, label: '惠水县' },
                { value: 522732, label: '三都县' }
              ]
            }
          ]
        },
        {
          value: 440000,
          label: '广东省',
          children: [
            {
              value: 440100,
              label: '广州市',
              children: [
                { value: 440103, label: '荔湾区' },
                { value: 440104, label: '越秀区' },
                { value: 440105, label: '海珠区' },
                { value: 440106, label: '天河区' },
                { value: 440111, label: '白云区' },
                { value: 440112, label: '黄埔区' },
                { value: 440113, label: '番禺区' },
                { value: 440114, label: '花都区' },
                { value: 440115, label: '南沙区' },
                { value: 440117, label: '从化区' },
                { value: 440118, label: '增城区' }
              ]
            }
          ]
        }
      ]
    };
  },
  computed: {
    /**
     * 表单验证规则
     */
    rules() {
      return {
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        emergencyPhone: [
          { required: true, message: '请输入紧急联系人电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ]
      };
    }
  },
  methods: {
    /**
     * 提交表单
     */
    async submitForm() {
      try {
        // 1. 表单验证
        await this.$refs.formRef.validate();

        // 2. 准备提交数据
        const submitData = {
          phone: this.form.phone,
          province: '',
          city: '',
          county: '',
          addressDetail: this.form.addressDetail,
          emergencyContact: this.form.emergencyContact,
          emergencyPhone: this.form.emergencyPhone
        };

        // 3. 如果选择了地址，解析省市区
        if (this.form.address.length === 3) {
          const province = this.regionOptions.find(p => p.value === this.form.address[0]);
          const city = province?.children.find(c => c.value === this.form.address[1]);
          const county = city?.children.find(co => co.value === this.form.address[2]);

          if (province && city && county) {
            submitData.province = province.label;
            submitData.city = city.label;
            submitData.county = county.label;
          }
        }

        // 4. 模拟提交
        console.log('提交数据:', submitData);

        // 5. 更新学生信息
        this.student.phone = this.form.phone;
        this.student.addressDetail = this.form.addressDetail;
        this.student.emergencyContact = this.form.emergencyContact;
        this.student.emergencyPhone = this.form.emergencyPhone;

        // 6. 显示成功消息
        this.$message.success('信息更新成功');
      } catch (err) {
        console.error('提交失败', err);
        this.$message.error('更新失败，请重试');
      }
    },

    /**
     * 重置表单
     */
    resetForm() {
      this.form.phone = this.student.phone;
      this.form.addressDetail = this.student.addressDetail;
      this.form.emergencyContact = this.student.emergencyContact;
      this.form.emergencyPhone = this.student.emergencyPhone;
    }
  }
};
</script>
